<template>
  <section class="content">
    <div class="title">
      <el-button type="text" @click="FnBack"><i class="el-icon-back"></i>返回</el-button>
      客户ID：{{$route.params.id}}</div>
    <div class="dashboard">
      <div class="dashboard-box">
        <div v-for="(value, key) in resource_num" :key="key" class="item">
          <div class="label">{{value.label}}</div>
          <div class="num">
            <el-button type="text" :disabled="value.disabled" @click="FnToList(key)">{{value.num}}</el-button>    
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import Service from '@/service/customer'
export default {
  data() {
    return {
      resource_num: {
        cluster: {label: "集群", num: 2, disabled: false},
        nas: {label: "文件存储", num: 12, disabled: true},
        block: {label: "块存储", num: 20, disabled: true},
        ha: {label: "HA", num: 5, disabled: true},
        harbor: {label: "镜像仓库", num: 5, disabled: false},
        dpvs: {label: "高性能出网网关", num: 5, disabled: false},
      }
    }
  },
  methods: {
    FnGetResource() {
      let reqData = {
        customer_id: this.$route.params.id
      }
      Service.get_resource(reqData).then(resData => {
        if(resData.code == "Success") {
          this.resource_num.cluster.num = resData.data.cluster_num
          this.resource_num.nas.num = resData.data.nas_num
          this.resource_num.block.num = resData.data.block_num
          this.resource_num.ha.num = resData.data.ha_num
          this.resource_num.harbor.num = resData.data.harbor_num
          this.resource_num.dpvs.num = resData.data.dpvs_num
        }
      })
    },
    FnToList(key) {
      if(key == "cluster") {
        this.$router.push({name: "cluster_list", params: {id: this.$route.params.id}})
      } else if (key == 'harbor') {
        this.$router.push({name: "harbor_list", query: {id: this.$route.params.id}})
      } else if (key == 'dpvs') {
        this.$router.push({name: "dpvs_list", query: {id: this.$route.params.id}})
      }
    },
    FnBack() {
      this.$router.push({name: "user_list"})
    }
  },
  created() {
    this.FnGetResource()
  }
}
</script>

<style lang="scss" scoped>
.content {
  height: 100%;
  .title {
    font-size: 16px;
    font-weight: bold;
  }
}
.dashboard {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80%;
  .dashboard-box {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    align-items: center;
    width: 700px;
    height: 100%;
    .item {
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 260px;
      height: 140px;
      background: #fff;
      border: 1px solid #e2e3e9;
      box-shadow: 0 0 10px 5px #e2e3e9;
      .label {
        font-size: 14px;
        font-weight: bold;
      }
    }
  }
}
</style>
<style lang="scss">
.num {
  .el-button--text{
    font-size: 14px;
    font-weight: bold;
  }
}
</style>